<template>
  <div class="app-container">
    <div>
      <el-alert type="warning" style="margin-bottom: 20px;" :closable="false">获取号码后需 15 分钟内发送成功，否则重置并且5 分钟后才可重新获取。</el-alert>
      
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="号码分组" prop="keywords">
          <el-select
            v-model="queryParams.groupId"
            placeholder="请选择号码分组"
            style="width: 200px"
            clearable
          >
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目标号码" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入目标号码"
            clearable
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="是否被获取" prop="keywords">
          <el-select
            v-model="queryParams.a"
            placeholder="是否被获取"
            style="width: 200px"
            clearable
          >
            <el-option label="未被获取" value="0"/>
            <el-option label="已被获取" value="1"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="handleQuery()">搜索</el-button>
          <el-button icon="refresh" @click="handleResetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div>
      <div class="mb-[10px] flex" style="align-items: center;">
        <el-button type="success" icon="plus" @click="handleAddClick()">导入号码</el-button>

        <el-button link type="primary">测试取号</el-button>
        <el-alert type="success" :closable="false" style="margin-left: 10px;">结果</el-alert>
      </div>

      <el-table
        v-loading="loading"
        :data="tableData"
        border
      >
        <el-table-column label="目标号码" prop="mobile" />
        <el-table-column label="号码分组" prop="groupName" />
        <el-table-column label="号码状态" prop="result">
          <template #default="{row}">
            <el-tag type="info" v-if="row.result == 'unknown'">未知</el-tag>
            <el-tag type="success" v-if="row.result == 'success'">成功</el-tag>
            <el-tag type="danger" v-if="row.result == 'fail'">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否被获取" prop="acquired">
          <template #default="{row}">
            <el-tag type="success" v-if="row.acquired">已被获取</el-tag>
            <el-tag type="warning" v-else>未被获取</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="下次获取时间" prop="nextAcquiredAt">
          <template #default="{row}">{{ row.nextAcquiredAt ? formatDate(row.nextAcquiredAt) : '--' }}</template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-model:current-page="paging.page"
          v-model:page-size="paging.size"
          :page-sizes="[10, 20, 30, 50, 100]"
          :size="paging.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <AddNumber ref="addNumberRef" @refresh="handleQuery" @handleOpenAddGroupForm="handleOpenAddGroupForm"/>
    <AddGroup ref="addGroupRef" @refresh="handleQuery"/>
  </div>
</template>

<script setup>
import { formatDate } from "@/utils";
import AddGroup from './addGroup.vue'
import AddNumber from './addNumbers.vue'
import { numberListApi, groupListApi } from '@/api/equipmentManagement/massTexting.api'
import { useParamStore } from '@/store'
const route = useRoute();
const { setParams, getParams, removeFalsyValues } = useParamStore()
const name = route.fullPath + '1'
onMounted(() => {
  if(!!getParams(name)) {
    queryParams.value = getParams(name)
  }
  getList()
})
const addGroupRef = ref(null)
const handleOpenAddGroupForm = (callBack) => {
  addGroupRef.value.handleOpen(callBack)
}

const paging = ref({
  size: 10,
  page: 1,
  total: 0,
})

const handleSizeChange = (e) => {
  paging.value.size = e
  getList()
}
const handleCurrentChange = (e) => {
  paging.value.page = e
  getList()
}

const loading = ref(false)
const tableData = ref([])
const queryParams = ref({
  groupId: ''
})
const handleQuery = () => {
  paging.value.page = 1
  paging.value.size = 10
  setParams(queryParams.value, name)
  getList()
}
const queryFormRef = ref(null)
const handleResetQuery = () => {
  queryFormRef.value.resetFields()
}

const addNumberRef = ref(null)
const handleAddClick = () => {
  addNumberRef.value.handleOpen()
}

const getList = () => {
  loading.value = true
  numberListApi({
    page: paging.value.page,
    size: paging.value.size,
    app: 'WA',
    // bundle: 'net.whatsapp.WhatsApp',
    ...queryParams.value
  }).then(res => {
    tableData.value = res.rows
    paging.value.total = res.count
    loading.value = false
  }).finally(() => {
    loading.value = false
  })
}

const groupList = ref([])
const getGroupList = () => {
  groupListApi({
    page: 1,
    size: 1000,
    app: 'WA',
    bundle: 'net.whatsapp.WhatsApp',
    ...queryParams.value
  }).then(res => {
    groupList.value = res.rows
  })
}
getGroupList()
</script>

<style scoped lang="scss">
.pagination{
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
.result {
  padding: 0 10px;
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background: #cccccc80;
  color: #00000090;
  margin-left: 10px;
}
</style>
